<template>
  <div class="system-config">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>系统配置</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleSave" :loading="saveLoading">
          <el-icon><Check /></el-icon>
          保存配置
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
          导出配置
        </el-button>
        <el-button @click="handleImport">
          <el-icon><Upload /></el-icon>
          导入配置
        </el-button>
      </div>
    </div>

    <!-- 配置选项卡 -->
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 基础设置 -->
      <el-tab-pane label="基础设置" name="basic">
        <div class="config-section">
          <el-form :model="basicConfig" label-width="150px">
            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Setting /></el-icon>
                  <span>系统基础信息</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="系统名称">
                    <el-input v-model="basicConfig.systemName" placeholder="请输入系统名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="系统版本">
                    <el-input v-model="basicConfig.systemVersion" placeholder="请输入系统版本" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="公司名称">
                    <el-input v-model="basicConfig.companyName" placeholder="请输入公司名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话">
                    <el-input v-model="basicConfig.contactPhone" placeholder="请输入联系电话" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="系统LOGO">
                    <el-upload
                      class="logo-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="beforeLogoUpload"
                    >
                      <img v-if="basicConfig.logoUrl" :src="basicConfig.logoUrl" class="logo" />
                      <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="系统描述">
                    <el-input
                      v-model="basicConfig.description"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入系统描述"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Clock /></el-icon>
                  <span>时间设置</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="时区设置">
                    <el-select v-model="basicConfig.timezone" placeholder="请选择时区">
                      <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                      <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                      <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                      <el-option label="伦敦时间 (UTC+0)" value="Europe/London" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="日期格式">
                    <el-select v-model="basicConfig.dateFormat" placeholder="请选择日期格式">
                      <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
                      <el-option label="MM/DD/YYYY" value="MM/DD/YYYY" />
                      <el-option label="DD/MM/YYYY" value="DD/MM/YYYY" />
                      <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="时间格式">
                    <el-select v-model="basicConfig.timeFormat" placeholder="请选择时间格式">
                      <el-option label="24小时制" value="24" />
                      <el-option label="12小时制" value="12" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作日设置">
                    <el-checkbox-group v-model="basicConfig.workdays">
                      <el-checkbox label="1">周一</el-checkbox>
                      <el-checkbox label="2">周二</el-checkbox>
                      <el-checkbox label="3">周三</el-checkbox>
                      <el-checkbox label="4">周四</el-checkbox>
                      <el-checkbox label="5">周五</el-checkbox>
                      <el-checkbox label="6">周六</el-checkbox>
                      <el-checkbox label="0">周日</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <div class="config-section">
          <el-form :model="securityConfig" label-width="150px">
            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Lock /></el-icon>
                  <span>登录安全</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="密码最小长度">
                    <el-input-number
                      v-model="securityConfig.minPasswordLength"
                      :min="6"
                      :max="20"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="密码有效期(天)">
                    <el-input-number
                      v-model="securityConfig.passwordExpireDays"
                      :min="0"
                      :max="365"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="登录失败次数">
                    <el-input-number
                      v-model="securityConfig.maxLoginAttempts"
                      :min="3"
                      :max="10"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账户锁定时间(分钟)">
                    <el-input-number
                      v-model="securityConfig.lockoutDuration"
                      :min="5"
                      :max="1440"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="会话超时(分钟)">
                    <el-input-number
                      v-model="securityConfig.sessionTimeout"
                      :min="10"
                      :max="480"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="强制密码复杂度">
                    <el-switch v-model="securityConfig.enforcePasswordComplexity" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="启用验证码">
                    <el-switch v-model="securityConfig.enableCaptcha" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="启用双因子认证">
                    <el-switch v-model="securityConfig.enableTwoFactor" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Key /></el-icon>
                  <span>访问控制</span>
                </div>
              </template>
              
              <el-form-item label="IP白名单">
                <el-input
                  v-model="securityConfig.ipWhitelist"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入IP地址，每行一个，支持CIDR格式"
                />
              </el-form-item>
              
              <el-form-item label="IP黑名单">
                <el-input
                  v-model="securityConfig.ipBlacklist"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入IP地址，每行一个，支持CIDR格式"
                />
              </el-form-item>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 邮件设置 -->
      <el-tab-pane label="邮件设置" name="email">
        <div class="config-section">
          <el-form :model="emailConfig" label-width="150px">
            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Message /></el-icon>
                  <span>SMTP配置</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="SMTP服务器">
                    <el-input v-model="emailConfig.smtpHost" placeholder="请输入SMTP服务器地址" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="SMTP端口">
                    <el-input-number
                      v-model="emailConfig.smtpPort"
                      :min="1"
                      :max="65535"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="发件人邮箱">
                    <el-input v-model="emailConfig.fromEmail" placeholder="请输入发件人邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发件人名称">
                    <el-input v-model="emailConfig.fromName" placeholder="请输入发件人名称" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名">
                    <el-input v-model="emailConfig.username" placeholder="请输入SMTP用户名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="密码">
                    <el-input
                      v-model="emailConfig.password"
                      type="password"
                      placeholder="请输入SMTP密码"
                      show-password
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="启用SSL">
                    <el-switch v-model="emailConfig.enableSSL" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="启用TLS">
                    <el-switch v-model="emailConfig.enableTLS" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item>
                <el-button type="primary" @click="testEmailConnection" :loading="testingEmail">
                  <el-icon><Connection /></el-icon>
                  测试连接
                </el-button>
                <el-button @click="sendTestEmail" :loading="sendingTestEmail">
                  <el-icon><Promotion /></el-icon>
                  发送测试邮件
                </el-button>
              </el-form-item>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 存储设置 -->
      <el-tab-pane label="存储设置" name="storage">
        <div class="config-section">
          <el-form :model="storageConfig" label-width="150px">
            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><FolderOpened /></el-icon>
                  <span>文件存储</span>
                </div>
              </template>
              
              <el-form-item label="存储类型">
                <el-radio-group v-model="storageConfig.type">
                  <el-radio label="local">本地存储</el-radio>
                  <el-radio label="oss">阿里云OSS</el-radio>
                  <el-radio label="cos">腾讯云COS</el-radio>
                  <el-radio label="qiniu">七牛云</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <div v-if="storageConfig.type === 'local'">
                <el-form-item label="存储路径">
                  <el-input v-model="storageConfig.localPath" placeholder="请输入本地存储路径" />
                </el-form-item>
                <el-form-item label="访问URL前缀">
                  <el-input v-model="storageConfig.urlPrefix" placeholder="请输入访问URL前缀" />
                </el-form-item>
              </div>
              
              <div v-else-if="storageConfig.type === 'oss'">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="AccessKey ID">
                      <el-input v-model="storageConfig.ossAccessKeyId" placeholder="请输入AccessKey ID" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="AccessKey Secret">
                      <el-input
                        v-model="storageConfig.ossAccessKeySecret"
                        type="password"
                        placeholder="请输入AccessKey Secret"
                        show-password
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="Bucket名称">
                      <el-input v-model="storageConfig.ossBucket" placeholder="请输入Bucket名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="地域节点">
                      <el-input v-model="storageConfig.ossEndpoint" placeholder="请输入地域节点" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="最大文件大小(MB)">
                    <el-input-number
                      v-model="storageConfig.maxFileSize"
                      :min="1"
                      :max="1024"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="允许的文件类型">
                    <el-input
                      v-model="storageConfig.allowedFileTypes"
                      placeholder="请输入允许的文件类型，用逗号分隔"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 系统监控 -->
      <el-tab-pane label="系统监控" name="monitor">
        <div class="config-section">
          <el-form :model="monitorConfig" label-width="150px">
            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Monitor /></el-icon>
                  <span>监控设置</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="启用系统监控">
                    <el-switch v-model="monitorConfig.enableMonitoring" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="监控数据保留天数">
                    <el-input-number
                      v-model="monitorConfig.dataRetentionDays"
                      :min="1"
                      :max="365"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="CPU使用率阈值(%)">
                    <el-input-number
                      v-model="monitorConfig.cpuThreshold"
                      :min="50"
                      :max="95"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="内存使用率阈值(%)">
                    <el-input-number
                      v-model="monitorConfig.memoryThreshold"
                      :min="50"
                      :max="95"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="磁盘使用率阈值(%)">
                    <el-input-number
                      v-model="monitorConfig.diskThreshold"
                      :min="70"
                      :max="95"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="启用邮件告警">
                    <el-switch v-model="monitorConfig.enableEmailAlert" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item label="告警邮箱">
                <el-input
                  v-model="monitorConfig.alertEmails"
                  placeholder="请输入告警邮箱，多个邮箱用逗号分隔"
                />
              </el-form-item>
            </el-card>

            <el-card class="config-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Document /></el-icon>
                  <span>日志设置</span>
                </div>
              </template>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="日志级别">
                    <el-select v-model="monitorConfig.logLevel" placeholder="请选择日志级别">
                      <el-option label="DEBUG" value="DEBUG" />
                      <el-option label="INFO" value="INFO" />
                      <el-option label="WARN" value="WARN" />
                      <el-option label="ERROR" value="ERROR" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="日志保留天数">
                    <el-input-number
                      v-model="monitorConfig.logRetentionDays"
                      :min="7"
                      :max="365"
                      controls-position="right"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="启用操作日志">
                    <el-switch v-model="monitorConfig.enableOperationLog" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="启用错误日志">
                    <el-switch v-model="monitorConfig.enableErrorLog" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 导入配置对话框 -->
    <el-dialog v-model="importDialogVisible" title="导入配置" width="500px">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        drag
        action="#"
        :before-upload="beforeConfigUpload"
        :auto-upload="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将配置文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 json 文件，且不超过 2MB
          </div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmImport">确定导入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Check,
  Refresh,
  Download,
  Upload,
  Setting,
  Clock,
  Lock,
  Key,
  Message,
  Connection,
  Promotion,
  FolderOpened,
  Monitor,
  Document,
  Plus,
  UploadFilled
} from '@element-plus/icons-vue'

// 响应式数据
const activeTab = ref('basic')
const saveLoading = ref(false)
const testingEmail = ref(false)
const sendingTestEmail = ref(false)
const importDialogVisible = ref(false)
const uploadRef = ref()

// 基础配置
const basicConfig = reactive({
  systemName: 'ERP管理系统',
  systemVersion: '1.0.0',
  companyName: '示例科技有限公司',
  contactPhone: '400-123-4567',
  logoUrl: '',
  description: '企业资源规划管理系统',
  timezone: 'Asia/Shanghai',
  dateFormat: 'YYYY-MM-DD',
  timeFormat: '24',
  workdays: ['1', '2', '3', '4', '5']
})

// 安全配置
const securityConfig = reactive({
  minPasswordLength: 8,
  passwordExpireDays: 90,
  maxLoginAttempts: 5,
  lockoutDuration: 30,
  sessionTimeout: 120,
  enforcePasswordComplexity: true,
  enableCaptcha: true,
  enableTwoFactor: false,
  ipWhitelist: '',
  ipBlacklist: ''
})

// 邮件配置
const emailConfig = reactive({
  smtpHost: 'smtp.qq.com',
  smtpPort: 587,
  fromEmail: 'system@example.com',
  fromName: 'ERP系统',
  username: '',
  password: '',
  enableSSL: false,
  enableTLS: true
})

// 存储配置
const storageConfig = reactive({
  type: 'local',
  localPath: '/uploads',
  urlPrefix: 'http://localhost:8080/uploads',
  ossAccessKeyId: '',
  ossAccessKeySecret: '',
  ossBucket: '',
  ossEndpoint: '',
  maxFileSize: 10,
  allowedFileTypes: 'jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx'
})

// 监控配置
const monitorConfig = reactive({
  enableMonitoring: true,
  dataRetentionDays: 30,
  cpuThreshold: 80,
  memoryThreshold: 85,
  diskThreshold: 90,
  enableEmailAlert: true,
  alertEmails: 'admin@example.com',
  logLevel: 'INFO',
  logRetentionDays: 30,
  enableOperationLog: true,
  enableErrorLog: true
})

// 方法
const loadConfig = async () => {
  try {
    // 模拟加载配置数据
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success('配置加载成功')
  } catch (error) {
    ElMessage.error('配置加载失败')
  }
}

const handleSave = async () => {
  try {
    saveLoading.value = true
    
    // 模拟保存配置
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const configData = {
      basic: basicConfig,
      security: securityConfig,
      email: emailConfig,
      storage: storageConfig,
      monitor: monitorConfig
    }
    
    console.log('保存配置:', configData)
    ElMessage.success('配置保存成功')
  } catch (error) {
    ElMessage.error('配置保存失败')
  } finally {
    saveLoading.value = false
  }
}

const handleReset = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有配置吗？此操作将恢复默认设置！',
      '重置确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 重置为默认配置
    await loadConfig()
    ElMessage.success('配置重置成功')
  } catch {
    // 用户取消重置
  }
}

const handleExport = () => {
  const configData = {
    basic: basicConfig,
    security: securityConfig,
    email: emailConfig,
    storage: storageConfig,
    monitor: monitorConfig,
    exportTime: new Date().toISOString()
  }
  
  const dataStr = JSON.stringify(configData, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  
  const link = document.createElement('a')
  link.href = URL.createObjectURL(dataBlob)
  link.download = `system-config-${new Date().toISOString().split('T')[0]}.json`
  link.click()
  
  ElMessage.success('配置导出成功')
}

const handleImport = () => {
  importDialogVisible.value = true
}

const beforeConfigUpload = (file) => {
  const isJSON = file.type === 'application/json' || file.name.endsWith('.json')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isJSON) {
    ElMessage.error('只能上传 JSON 格式的配置文件！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('配置文件大小不能超过 2MB！')
    return false
  }
  return false // 阻止自动上传
}

const confirmImport = () => {
  const fileList = uploadRef.value?.uploadFiles
  if (!fileList || fileList.length === 0) {
    ElMessage.warning('请选择要导入的配置文件')
    return
  }
  
  const file = fileList[0].raw
  const reader = new FileReader()
  
  reader.onload = (e) => {
    try {
      const configData = JSON.parse(e.target.result)
      
      // 验证配置数据结构
      if (configData.basic) Object.assign(basicConfig, configData.basic)
      if (configData.security) Object.assign(securityConfig, configData.security)
      if (configData.email) Object.assign(emailConfig, configData.email)
      if (configData.storage) Object.assign(storageConfig, configData.storage)
      if (configData.monitor) Object.assign(monitorConfig, configData.monitor)
      
      ElMessage.success('配置导入成功')
      importDialogVisible.value = false
    } catch (error) {
      ElMessage.error('配置文件格式错误')
    }
  }
  
  reader.readAsText(file)
}

const beforeLogoUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return false
  }
  
  // 模拟上传成功
  const reader = new FileReader()
  reader.onload = (e) => {
    basicConfig.logoUrl = e.target.result
  }
  reader.readAsDataURL(file)
  
  return false // 阻止自动上传
}

const testEmailConnection = async () => {
  try {
    testingEmail.value = true
    
    // 模拟测试邮件连接
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success('邮件服务器连接测试成功')
  } catch (error) {
    ElMessage.error('邮件服务器连接测试失败')
  } finally {
    testingEmail.value = false
  }
}

const sendTestEmail = async () => {
  try {
    sendingTestEmail.value = true
    
    // 模拟发送测试邮件
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    ElMessage.success('测试邮件发送成功')
  } catch (error) {
    ElMessage.error('测试邮件发送失败')
  } finally {
    sendingTestEmail.value = false
  }
}

// 生命周期
onMounted(() => {
  loadConfig()
})
</script>

<style scoped>
.system-config {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.config-section {
  padding: 20px 0;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
}

.logo {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
}

.upload-demo {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .config-section {
    padding: 10px 0;
  }
}
</style>